<template>
  <div>
    <div>
      <el-form
        style="max-width: 600px"
        label-width="auto"
        :model="Data"
      >
        <el-form-item
          label="帖子ID"
          prop="postId"
          :rules="[
            { required: true, message: '请输入帖子ID', trigger: 'blur' }
          ]"
        >
          <el-input
            v-model="Data.postId"
            type="text"
            placeholder="可由粉丝圈发帖管理、活动管理跳转自动填写"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="状态"
          prop="status"
          :rules="[
            { required: true, message: '请输入状态', trigger: 'blur' }
          ]"
        >
          <el-select
            v-model="Data.status"
            style="width: 240px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item
          label="页码"
          prop="pageNum"
          :rules="[
            { required: true, message: '请输入页码', trigger: 'blur' }
          ]"
        >
          <el-input
            v-model="Data.pageNum"
            type="text"
            autocomplete="off"
          />
        </el-form-item> -->
        <!-- <el-form-item
          label="排序的字段"
          prop="columns"
        >
          <el-input
            v-model="Data.columns"
            type="text"
            autocomplete="off"
          />
        </el-form-item> -->
        <el-form-item
          label="排序方式"
          prop="orders"
        >
          <el-select
            v-model="Data.orders"
            style="width: 240px"
          >
            <el-option
              v-for="item in ordersOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="getLoading"
            type="primary"
            @click="getComment()"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :loading="getLoading"
        :data="getData"
        :stripe="true"
        :border="true"
        row-key="imgId"
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column
          label="评论ID"
          prop="commentId"
          align="center"
        />
        <el-table-column
          label="内容"
          prop="content"
          align="center"
        />
        <el-table-column
          label="用户ID"
          prop="userId"
          align="center"
        />
        <el-table-column
          label="状态"
          prop="status"
          align="center"
        >
          <template #default="scope">
            <span
              v-if="scope.row.status == 0"
            >
              未审核
            </span>
            <span
              v-else-if="scope.row.status == 1"
            >
              已通过
            </span>
            <span
              v-else
            >
              状态错误
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="用户"
          align="center"
        >
          <template #default="scope">
            <div>
              <span v-if="!scope.row.pic">无图片</span>
              <!-- WARN: wait backend-->
              <img
                v-else
                :src="`${scope.row.pic}`"
                style="height: 3rem"
              >
              <p>用户名：{{ scope.row.nickName }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="管理"
          align="center"
        >
          <template #default="scope">
            <el-button
              v-if="scope.row.status == 0"
              :loading="passLoading"
              type="success"
              @click="passHandle(scope.row.commentId, scope.row.postId)"
            >
              通过
            </el-button>
            <el-button
              :loading="rejectLoading"
              type="danger"
              @click="rejectHandle(scope.row.commentId)"
            >
              隐藏
            </el-button>
          </template>
        </el-table-column>
        <!-- TODO: linkUrl -->
      </el-table>
    </div>
    <div style="margin-top: 0.5rem">
      <el-pagination
        v-show="totalPage > 0"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="Data.pageNum"
        :page-size="Data.pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
    </div>
  </div>
</template>

<script setup>
import * as api from '@/api/platform/comment'

const Data = reactive({
  postId: history.state.postId,
  status: '0',
  pageSize: 10,
  pageNum: 1,
  columns: 'createTime',
  orders: 'DESC'
})
const ordersOptions = [
  {
    value: 'DESC',
    label: '降序排序'
  },
  {
    value: 'ASC',
    label: '升序排序'
  }
]

const statusOptions = [
  {
    value: '0',
    label: '未审核'
  },
  {
    value: '1',
    label: '已通过'
  }
]

const totalPage = ref(0)
const getData = ref([])
const getLoading = ref(false)
function getComment () {
  if (Data.postId == null || Data.status == null || Data.pageSize == null || Data.pageNum == null) {
    ElMessage.error('请输入完整信息')
    // console.log(Data.postId, Data.status, Data.pageSize, Data.pageNum)
  } else {
    getLoading.value = true
    api.getComment(Data).then(res => {
      ElMessage.success('网络请求成功')
      getData.value = res.list
      totalPage.value = res.total
      getLoading.value = false
    }).catch(() => {
      ElMessage.error('网络请求失败')
      getLoading.value = false
    })
  }
}

const passLoading = ref(false)
const rejectLoading = ref(false)

function passHandle (commentId, postId) {
  passLoading.value = true
  api.passComment({ commentId, postId }).then(() => {
    ElMessage.success('通过成功')
    getComment()
    passLoading.value = false
  }).catch(() => {
    ElMessage.error('通过失败')
    passLoading.value = false
  })
}
function rejectHandle (commentId) {
  rejectLoading.value = true
  api.rejectComment({ commentId }).then(() => {
    ElMessage.success('隐藏成功')
    getComment()
    rejectLoading.value = false
  }).catch(() => {
    ElMessage.error('隐藏失败')
    rejectLoading.value = false
  })
}

function sizeChangeHandle (pageSize) {
  Data.pageSize = pageSize
  getComment()
}

function currentChangeHandle (pageNum) {
  Data.pageNum = pageNum
  getComment()
}

onMounted(() => {
  if (Data.postId) {
    getComment()
  }
})
</script>
